<template>
	<view class="content">
		<view class="headercontent">
			<view class="back-box" @click="goback">
				<image :src="proxy.serverimageUrl + 'back-black.png'" mode=""></image>
				<!-- <image :src="../../static/member/back-black.png" mode=""></image> -->
				<view class="text" v-if="type == '1'">会员访问</view>
				<view class="text" v-if="type == '2'">会员收藏</view>
				<view class="text" v-if="type == '3'">会员分享</view>
			</view>
		</view>

		<view class="table-content">
			<z-paging :paging-style="{ height: '100%' }" default-page-no="1" default-page-size="8" :fixed="false" ref="paging" @query="queryList">
				<view class="table-item" v-for="(item, index) in dataList" :key="index">
					<view style="display: flex; align-items: center">
						<image class="avatar" :src="item.avatar" mode="" @click="gomenber(item.mid)"></image>
						<view class="item-center">
							<view class="title-name">
								<view class="nametext">
									{{ item.memberName }}
								</view>
								<image :src="proxy.serverimageUrl + 'member/1.png'" v-if="item.employmentSituation == '会长'" mode=""></image>
								<image v-if="item.employmentSituation == '副会长'" :src="proxy.serverimageUrl + 'member/2.png'" mode=""></image>
								<image v-if="item.employmentSituation == '理事'" :src="proxy.serverimageUrl + 'member/3.png'" mode=""></image>
								<image v-if="item.employmentSituation == '会员'" :src="proxy.serverimageUrl + 'member/4.png'" mode=""></image>
							</view>
							<p class="p1">{{ item.workUnit }}</p>
							<p class="p1 p2" v-if="item.type == 1">访问时间: {{ item.accessTime }}</p>
							<p class="p1 p2" v-if="item.type == 3">被分享: {{ item.sharingFrequency }}</p>
							<p class="p1 p2" v-if="item.type == 2">被收藏: {{ item.collectionNumber }}</p>
						</view>
					</view>

					<view class="btn">
						<up-button color="#2854B7" v-if="!item.status || item.status == 0" @click="collect(1, item.mid)" shape="circle" :text="btntext"></up-button>
						<up-button color="#E8EFFE" v-if="item.status == 1" @click="collect(2, item.mid)" class="custom-style" shape="circle" text="已收藏"></up-button>
					</view>
				</view>
			</z-paging>
		</view>
	</view>
</template>

<script setup>
import { collectionsList, historyList, shareList, cancelCollections, collections } from '../../utils/api.js';
import { reactive, ref, getCurrentInstance } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import useZPaging from "@/uni_modules/z-paging/components/z-paging/js/hooks/useZPaging.js";

const customStyle = reactive({
	color: '#2854B7'
});
// const mid = ref('')
const parentmid = ref('');
const cmid = ref(uni.getStorageSync('mid'));
const typeindex = ref(null);
const type = ref('');
const paging = ref(null);
const btntext = ref('');
onLoad((o) => {
	type.value = o.type;
	typeindex.value = o.coltype;
	if (o.type == 1 || o.type == 3) {
		btntext.value = '访问';
	} else {
		btntext.value = '收藏';
	}
	if (o.mid) {
		parentmid.value = o.mid;
	}
	// getlist(parentmid.value);
});
const { proxy, ctx } = getCurrentInstance();
//返回上一级页面
const goback = () => {
	uni.navigateBack();
};
/*跳转会员详情*/
const gomenber = (mid) => {
	uni.navigateTo({
		url: '/subpages/memberdetail/index?mid=' + mid
	});
};
//点击收藏或者访问
const collect = (types, mid) => {
	if (type.value == 1 || type.value == 3) {
		if (mid === cmid.value) {
			uni.switchTab({
				url: '/pages/Mypage/index'
			});
		} else {
			uni.navigateTo({
				url: '/subpages/memberdetail/index?mid=' + mid
			});
		}
	} else {
		if (types == 1) {
			let params = {
				cmid: cmid.value,
				mid: mid
			};
			collections(params).then((res) => {
				if (res.code == 200) {
					setTimeout(() => {
						uni.showToast({
							title: '收藏成功',
							duration: 1000,
							icon: 'success'
						});
						setTimeout(() => {
							uni.hideToast();
							if (type.value == 1 || type.value == 3) {
								btntext.value = '访问';
							} else {
								btntext.value = '收藏';
							}
						}, 1000);
					}, 0);
				}
			});
		} else {
			let params = {
				cmid: cmid.value,
				mid: mid
			};
			cancelCollections(params).then((res) => {
				setTimeout(() => {
					uni.showToast({
						title: '取消收藏成功',
						duration: 1000,
						icon: 'success'
					});
					setTimeout(() => {
						uni.hideToast();
						if (type.value == 1 || type.value == 3) {
							btntext.value = '访问';
						} else {
							btntext.value = '收藏';
						}
					}, 1000);
				}, 0);
			});
		}
	}
};
//请求列表的数据
const paramsdata = ref({
	pageNum: 1,
	pageSize: 8,
	mid: null,
	cmid: null,
	type: 0
});
//列表数据空数组
const dataList = ref([]);
//请求列表接口方法
const queryList = (pageNum, pageSize) => {
	paramsdata.value.pageNum = pageNum;
	paramsdata.value.pageSize = pageSize;
	if (typeindex.value == '1') {
		paramsdata.value.mid = null;
		paramsdata.value.type = 1;
	} else {
		paramsdata.value.mid = parentmid.value ? parentmid.value : null;
		paramsdata.value.type = 0;
	}
	paramsdata.value.cmid = cmid.value ? cmid.value : null;
	if (type.value == 2) {
		collectionsList(paramsdata.value).then((res) => {
			if (res.code == 200) {
				const list = res.rows
				paging.value.complete(dataList.value);
			}
		});
	} else if (type.value == 1) {
		historyList(paramsdata.value).then((res) => {
			if (res.code == 200) {
				const list = res.rows
				paging.value.complete(list);
			}
		});
	} else {
		shareList(paramsdata.value).then((res) => {
			if (res.code == 200) {
				const list = res.rows
				paging.value.complete(list.value);
			}
		});
	}
};
</script>

<style lang="scss" scoped>
.content {
	height: 100vh;
	padding: 114rpx 40rpx 0;
	background-color: #ffffff;

	.headercontent {
		margin-bottom: 36rpx;

		.back-box {
			display: flex;
			align-items: center;

			image {
				width: 18rpx;
				height: 34rpx;
			}

			.text {
				margin-left: 20rpx;
				font-family: Alibaba PuHuiTi;
				font-weight: 500;
				font-size: 36rpx;
				color: #202020;
			}
		}
	}

	.table-content {
		box-sizing: border-box;
		height: calc(100vh - 250rpx);
		padding-top: 60rpx;

		.table-item {
			margin-bottom: 72rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.avatar {
				width: 118rpx;
				height: 118rpx;
				border-radius: 50%;
			}

			.item-center {
				margin-left: 28rpx;

				.title-name {
					display: flex;
					align-items: center;

					.nametext {
						font-family: Alibaba PuHuiTi;
						font-weight: 500;
						font-size: 34rpx;
						color: #252525;
					}

					image {
						width: 104rpx;
						height: 43rpx;
					}
				}

				.p1 {
					margin-top: 18rpx;
					font-family: Alibaba PuHuiTi;
					font-weight: 400;
					font-size: 24rpx;
					color: #bbc0ca;
				}

				.p2 {
					margin-top: 13rpx;
				}
			}

			.btn {
				margin-left: 32rpx;
				width: 140rpx;
				height: 60rpx;
			}
		}
	}
}
</style>
